<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>日期计算工具</title>
    <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css">
</head>

<body>
    <div class="container mt-5">
        <h1 class="mb-4">日期计算工具</h1>

        <!-- 日期间隔计算 -->
        <div class="card mb-4">
            <div class="card-header">
                <h2>日期间隔计算</h2>
            </div>
            <div class="card-body">
                <form>
                    <div class="form-group row">
                        <label for="inputStartDate" class="col-sm-2 col-form-label">开始日期：</label>
                        <div class="col-sm-10">
                            <input type="date" class="form-control" id="inputStartDate">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputEndDate" class="col-sm-2 col-form-label">结束日期：</label>
                        <div class="col-sm-10">
                            <input type="date" class="form-control" id="inputEndDate">
                        </div>
                    </div><br />
                    <div class="form-group row">
                        <div class="col-sm-10 offset-sm-2">
                            <button type="button" class="btn btn-primary"
                                onclick="calculateDateInterval()">计算日期间隔</button>
                        </div>
                    </div>
                </form>
                <div class="mt-4">
                    <p>日期间隔天数：</p>
                    <div id="dateIntervalResult"></div>
                </div>
            </div>
        </div>

        <!-- 目标日期计算 -->
        <div class="card">
            <div class="card-header">
                <h2>目标日期计算</h2>
            </div>
            <div class="card-body">
                <form>
                    <div class="form-group row">
                        <label for="inputStartDate2" class="col-sm-2 col-form-label">开始日期：</label>
                        <div class="col-sm-10">
                            <input type="date" class="form-control" id="inputStartDate2">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputDayInterval" class="col-sm-2 col-form-label">间隔天数：</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="inputDayInterval" min="1">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-10 offset-sm-2">
                            <button type="button" class="btn btn-primary"
                                onclick="calculateTargetDate()">计算目标日期</button>
                        </div>
                    </div>
                </form><br />
                <div class="mt-4">
                    <p>目标日期：</p>
                    <div id="targetDateResult"></div>
                </div>
            </div>
        </div>

    </div>
    <script>
        // 计算日期间隔
        function calculateDateInterval() {
            const startDate = new Date(document.getElementById("inputStartDate").value);
            const endDate = new Date(document.getElementById("inputEndDate").value);

            if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
                alert("请输入有效的日期！");
                return;
            }

            const dateInterval = Math.floor((endDate.getTime() - startDate.getTime()) / (1000 * 3600 * 24));
            document.getElementById("dateIntervalResult").innerHTML = dateInterval + " 天";
        }

        // 计算目标日期
        function calculateTargetDate() {
            const startDate = new Date(document.getElementById("inputStartDate2").value);
            const dayInterval = parseInt(document.getElementById("inputDayInterval").value);

            if (isNaN(startDate.getTime()) || isNaN(dayInterval)) {
                alert("请输入有效的日期和天数！");
                return;
            }

            const targetDate = new Date(startDate.getTime() + dayInterval * 24 * 3600 * 1000);
            const year = targetDate.getFullYear();
            const month = targetDate.getMonth() + 1;
            const day = targetDate.getDate();

            document.getElementById("targetDateResult").innerHTML = year + " 年 " + month + " 月 " + day + " 日";
        }
    </script>
</body>

</html>